<template>
    <headerr></headerr>
    <div class="tao-row mt-2 mb-5">
        <div class="bg-white py-3 ps-4 border-bottom">
            <p class="text-secondary fs-5">共<span class="text-danger fs-5 px-1">{{goodsInfo.total}}</span>个商品</p>
        </div>
        <Row>
            <Col :span="18">
                <div class="bg-white list-condition clearfix">
                    <dl class="d-flex list-condition-item clearfix">
                        <dt>城市：</dt>
                        <dd><a href="#" @click.prevent="searchParam.areaId=0" :class="searchParam.areaId==0?'select-condition':''">全部</a></dd>
                        
                        <ul class="list-inline">
                            <li v-for="q in querycityArr" class="list-inline-item mb-3"><a href="#" @click.prevent="searchParam.areaId=q.id" :class="searchParam.areaId==q.id?'select-condition':''">{{q.name}}</a></li>
                        </ul>
                    </dl>
                    <dl class="d-flex list-condition-item clearfix">
                        <dt>分类：</dt>
                        <dd><a href="#" @click.prevent="searchParam.itemTypeId1=0" :class="searchParam.itemTypeId1==0?'select-condition':''">全部</a></dd>
                        <ul class="list-inline">
                            <li v-for="s in sortgoodsArr" class="list-inline-item mb-3"><a href="#" @click.prevent="searchParam.itemTypeId1=s.id" :class="searchParam.itemTypeId1==s.id?'select-condition':''">{{s.itemType}}</a></li>
                        </ul>
                    </dl>
                    <dl class="d-flex list-condition-item clearfix" v-if="sortgoodsArr2.length!=0">
                        <dt>分类2：</dt>
                        <dd><a href="#" @click.prevent="searchParam.itemTypeId2=0" :class="searchParam.itemTypeId2==0?'select-condition':''">全部</a></dd>
                        <dd>
                            <ul class="list-inline">
                                <li v-for="s in sortgoodsArr2" class="list-inline-item mb-3"><a href="#" @click.prevent="searchParam.itemTypeId2=s.id" :class="searchParam.itemTypeId2==s.id?'select-condition':''">{{s.itemType}}</a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl class="d-flex list-condition-item clearfix" v-if="true">
                        <dt>时间：</dt>
                        <dd><a href="#" @click.prevent="searchParam.timeind=0" :class="searchParam.timeind==0?'select-condition':''">全部</a></dd>
                        <dd><a href="#" @click.prevent="searchParam.timeind=1" :class="searchParam.timeind==1?'select-condition':''">今天</a></dd>
                        <dd><a href="#" @click.prevent="searchParam.timeind=2" :class="searchParam.timeind==2?'select-condition':''">明天</a></dd>
                        <dd><DatePicker type="date" placeholder="选择日期" format="yyyy-MM-dd" v-model="searchParam.startTime" @on-change="searchParam.startTime=$event" size="small" style="width: 150px" /></dd>
                        <dd>-</dd>
                        <dd><DatePicker type="date" placeholder="选择日期" format="yyyy-MM-dd" v-model="searchParam.endTime" @on-change="searchParam.endTime=$event" size="small" style="width: 150px" /></dd>
                    </dl>
                </div>
                <div class="list-main mt-4 position-relative">
                     <Tabs type="card" :animated="false" @on-click="searchParam.sort=$event">
                        <TabPane label="热门推荐">
                            <listItem :listItemStyle="listMainStyle.listItemStyle" @pageChange="pageChange" :goodsInfo="goodsInfo"></listItem>
                        </TabPane>
                        <TabPane label="最近开场">
                            <listItem :listItemStyle="listMainStyle.listItemStyle" @pageChange="pageChange" :goodsInfo="goodsInfo"></listItem>
                        </TabPane>
                        <TabPane label="最新上架">
                            <listItem :listItemStyle="listMainStyle.listItemStyle" @pageChange="pageChange" :goodsInfo="goodsInfo"></listItem>
                        </TabPane>
                    </Tabs>
                    <div class="position-absolute" style="top:0;right:20px;z-index:100000000;">
                        <RadioGroup v-model="listMainStyle.sort" type="button">
                            <Radio label="1" @click="listMainStyle.listItemStyle='list-item'"><Icon type="md-menu" /></Radio>
                            <Radio label="2" @click="listMainStyle.listItemStyle='list-itembig'"><Icon type="logo-windows" /></Radio>
                        </RadioGroup>
                    </div>
                </div>
            </Col>
            <Col :span="6">
                <div class="guessLike">
                    <h5>您可能还喜欢</h5>
                    <div class="guessLike-body">
                        <ul>
                            <li v-for="g in guesslikes">
                                <router-link to="/">
                                    <div class="guessLike-big-img">
                                        <img :src="g.imgUrl" alt="">
                                    </div>
                                    <div class="guessLike-info">
                                        <p class="guessLike-info-title">{{g.itemName}}</p>
                                        <p class="guessLike-info-address">{{g.address}}</p>
                                        <p class="guessLike-info-time">{{g.startDate}}~{{g.endDate}}</p>
                                        <p class="guessLike-info-price">
                                            <span>{{g.minPrice}}元</span>
                                            起
                                        </p>
                                    </div>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </Col>
        </Row>
    </div>
    <footerr></footerr>
</template>
<script setup>
    import headerr from "../../components/header/index.vue"
    import footerr from "../../components/footer/index.vue"
    import {reactive,watch,computed,watchEffect} from "vue"
    import {querycity,sortgoods,guesslike,querygoodsinfos} from "../../utils/api"
    import listItem from "./list-item/list-item.vue"
    import {useRoute} from "vue-router"
    import {Notice} from "view-ui-plus"

    let route = useRoute();

    /**
     * 搜索条件
     */
    let searchParam = reactive({
        areaId: 0,//地区id
        currentPage: 1,//页面编号
        endTime: null,//结束日期
        itemTypeId1: 0,//itemTypeid1
        itemTypeId2: 0,//itemTypeid2
        pageSize: 16,//显示元素数量
        sort: 0,//排序
        startTime: null,//开始日期
        timeind:0,//
        keyword:null//搜索关键字
    })

    let listMainStyle = reactive({
        listItemStyle:"list-item"
    });
    
    /**
     * 搜素条件地区
     */
    let querycityArr = reactive([]);

    querycity().then(({data})=>{
        querycityArr.length=0;
        querycityArr.push(...data.data);
    });

    /**
     * 搜素条件分类1
     */
    let sortgoodsArr = reactive([]);

    sortgoods().then(({data})=>{
        sortgoodsArr.length=0;
        sortgoodsArr.push(...data.data);
    });

    /**
     * 搜素条件分类2
     */
    let sortgoodsArr2 = reactive([]);

    watch(searchParam,()=>{
        if(searchParam.itemTypeId1==0) return sortgoodsArr2.length=0;
        sortgoods(searchParam.itemTypeId1).then(({data})=>{
            sortgoodsArr2.length=0;
            sortgoodsArr2.push(...data.data);
        });
    })

    /**
     * 猜你喜欢
     */
    let guesslikes = reactive([]);

    guesslike().then(({data})=>{
        guesslikes.push(...data.data);
    })

    /**
     * 商品列表
     */
    let goodsInfo = reactive({});

    function searchGoods(){
        searchParam.keyword=route.query.search;
        querygoodsinfos(searchParam).then(({data})=>{
            searchParam.currentPage=data.data.currentPage;
            goodsInfo.pageCount=data.data.pageCount;
            searchParam.pageSize=data.data.pageSize;
            goodsInfo.rows=data.data.rows;
            goodsInfo.total=data.data.total;
            goodsInfo.pageSize=data.data.pageSize;
        })
    }
    watchEffect(
        searchGoods
    )
    
    function pageChange(page){
        searchParam.currentPage=page;
        window.scrollTo(0,0);
    }



</script>
<style>
    .list-condition{
        padding: 10px 24px 0;
    }
    .list-condition-item:not(:last-child){
        margin-bottom: 20px;
        border-bottom: 1px solid #e9ecef;
    }
    .list-condition-item a{
        color:#333;
        font-size: 14px;
        padding: 0 8px;
        height:26px;
        line-height: 26px;
        display: block;
    }
    .list-condition-item .select-condition{
        background: var(--danger-color);
        color: #fff;
    }
    .list-condition-item a:hover{
        background: var(--danger-color);
        color: #fff;
    }
    .list-condition-item dt{
        text-align: end;
        width: 80px;
    }
    .list-condition-item dt,.list-condition dd{
        font-size: 14px;
        font-weight: 400;
        margin:0 5px;
    }
    .list-condition-item dd{
        min-height: 62px;
    }
    .list-condition-item dd ul{
        width: 680px;
    }
    .guessLike{
        background-color: #fff;
        margin-left: 20px;
    }
    .guessLike h5{
        background-color: #e6e6e6;
        padding-left:15px;
        height: 37px;
        line-height: 37px;
        font-size: 14px;
    }
    .guessLike-body{
        padding: 0 15px 15px;
    }
    .guessLike-body ul li a{
        display: block;
    }
    .guessLike-body ul li a::after{
        display: block;
        content: '';
        clear: both;
    }
    .guessLike-body ul li{
        margin-top: 20px;
        list-style: none;
        height: 132px;
    }
    .guessLike-big-img{
        width: 98px;
        height: 132px;
        float: left;
    }
    .guessLike-big-img img{
        height: 100%;
        width: 100%;
    }
    .guessLike-info{
        height: 132px;
        padding-left: 10px;
        float: left;
    }
    .guessLike-info .guessLike-info-title{
        height: 48px;
        line-height: 16px;
        text-overflow: ellipsis;
        width: 98px;
        white-space: nowrap;
        overflow: hidden;
        color: #1b1b1b;
    }
    .guessLike-info .guessLike-info-address{
        color: #999;
        text-overflow: ellipsis;
        width: 98px;
        white-space: nowrap;
        overflow: hidden;
    }
    .guessLike-info .guessLike-info-time{
        color: #999;
        text-overflow: ellipsis;
        width: 98px;
        white-space: nowrap;
        overflow: hidden;
    }
    .guessLike-info .guessLike-info-price{
        color: #999;
        margin-top: 20px;
    }
    .guessLike-info .guessLike-info-price span{
        color: #ff3c1b;
        font-size: 14px;
        font-weight: 700;
        margin-right: 5px;
    }
    /* 自定义选项卡样式 */
    .list-main .ivu-tabs-nav-scroll {
        background: #f8f8f9;
    }
    .list-main > .ivu-tabs-card > .ivu-tabs-content {
        margin-top: -16px;
    }

    .list-main > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
        background: #fff;
        padding: 16px;
    }

    .list-main > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
        height: 32px;
        border-radius: 0;
        border: none;
        font-size: 14px;
    }
</style>